<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Traceability</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0 auto;
        }
        table{
            margin-top: 50px;
        }
        table td{
            padding: 5px 15px;
        }
        div{
            margin-top: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0">
            <tr>
                <td>ID</td>
                <td>产品名称</td>
                <td>生产者</td>
                <td>加工</td>
                <td>运输</td>
                <td>批发</td>
                <td>销售</td>
                <td>购买</td>
                <td>产品状态</td>
                <td>更新时间</td>
<!--                <td>描述信息</td>-->
            </tr>
            <tr v-for="item in productList">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.produce}}</td>
                <td>{{item.processing}}</td>
                <td>{{item.transport}}</td>
                <td>{{item.wholesale}}</td>
                <td>{{item.sales}}</td>
                <td>{{item.buy}}</td>
                <td>{{item.status}}</td>
                <td>{{item.updated}}</td>
<!--                <td>{{item.desc}}</td>-->
            </tr>
        </table>
        <div>
            Name:<input type="text" name="productName">
            Produce:<input type="text" name="produce">
            <input type="button" value="PRODUCE" @click="produce">
        </div>
        <div>
            Id:<input type="text" name="id1">
            Processing:<input type="text" name="processing">
            <input type="button" value="PROCESSING" @click="processing">
        </div>
        <div>
            Id:<input type="text" name="id2">
            Transport:<input type="text" name="transport">
            <input type="button" value="TRANSPORT" @click="transport">
        </div>
        <div>
            Id:<input type="text" name="id3">
            WholeSale:<input type="text" name="wholesale">
            <input type="button" value="WHOLESALE" @click="wholesale">
        </div>
        <div>
            Id:<input type="text" name="id4">
            Sales:<input type="text" name="sales">
            <input type="button" value="SALES" @click="sales">
        </div>
        <div>
            Id:<input type="text" name="id5">
            Buy:<input type="text" name="buy">
            <input type="button" value="BUY" @click="buy">
        </div>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data () {
            return {
                productList: null
            }
        },
        created(){
            let _this = this
            $.ajax({
                url: "http://localhost:8080/getProductAll",
                type: "GET",
                dataType: 'json',
                data:{},
                success: (res) => {
                    console.log(res)
                    this.productList = res
                },
                error:()=>{
                    console.log("失败");
                }
            })
        },
        mounted(){

        },
        methods: {
            produce: function () {
                let _this = this
                $.ajax({
                    url: "http://localhost:8080/produceProduct",
                    type: "POST",
                    dataType: 'json',
                    data:{
                        "Id": "",
                        "Name": $('input[name="productName"]').val(),
                        "Produce": $('input[name="produce"]').val(),
                        "Processing": "",
                        "Transport": "",
                        "Wholesale": "",
                        "Sales": "",
                        "Buy": "",
                        "Status": "",
                        "Updated": "2021-02-08T13:03:51.454527615Z",
                        "Desc": ""
                    },
                    success: (res) => {
                        $('input[name="productName"]').val('')
                        $('input[name="produce"]').val('')
                        $.ajax({
                            url: "http://localhost:8080/getProductAll",
                            type: "GET",
                            dataType: 'json',
                            data:{},
                            success: (res) => {
                                console.log(res)
                                this.productList = res
                            },
                            error:()=>{
                                console.log("失败");
                            }
                        })
                    },
                    error:()=>{
                        console.log("失败");
                    }
                })
            },
            processing: function () {
                let _this = this
                $.ajax({
                    url: "http://localhost:8080/processingProduct",
                    type: "POST",
                    dataType: 'json',
                    data:{
                        "Id": $('input[name="id1"]').val(),
                        "Name": "",
                        "Produce": "",
                        "Processing": $('input[name="processing"]').val(),
                        "Transport": "",
                        "Wholesale": "",
                        "Sales": "",
                        "Buy": "",
                        "Status": "",
                        "Updated": "2021-02-08T13:03:51.454527615Z",
                        "Desc": ""
                    },
                    success: (res) => {
                        $('input[name="id1"]').val('')
                        $('input[name="processing"]').val('')
                        $.ajax({
                            url: "http://localhost:8080/getProductAll",
                            type: "GET",
                            dataType: 'json',
                            data:{},
                            success: (res) => {
                                console.log(res)
                                this.productList = res
                            },
                            error:()=>{
                                console.log("失败");
                            }
                        })
                    },
                    error:()=>{
                        console.log("失败");
                    }
                })
            },
            transport: function () {
                let _this = this
                $.ajax({
                    url: "http://localhost:8080/transportProduct",
                    type: "POST",
                    dataType: 'json',
                    data:{
                        "Id": $('input[name="id2"]').val(),
                        "Name": "",
                        "Produce": "",
                        "Processing": "",
                        "Transport": $('input[name="transport"]').val(),
                        "Wholesale": "",
                        "Sales": "",
                        "Buy": "",
                        "Status": "",
                        "Updated": "2021-02-08T13:03:51.454527615Z",
                        "Desc": ""
                    },
                    success: (res) => {
                        $('input[name="id2"]').val('')
                        $('input[name="transport"]').val('')
                        $.ajax({
                            url: "http://localhost:8080/getProductAll",
                            type: "GET",
                            dataType: 'json',
                            data:{},
                            success: (res) => {
                                console.log(res)
                                this.productList = res
                            },
                            error:()=>{
                                console.log("失败");
                            }
                        })
                    },
                    error:()=>{
                        console.log("失败");
                    }
                })
            },
            wholesale: function () {
                let _this = this
                $.ajax({
                    url: "http://localhost:8080/wholesaleProduct",
                    type: "POST",
                    dataType: 'json',
                    data:{
                        "Id": $('input[name="id3"]').val(),
                        "Name": "",
                        "Produce": "",
                        "Processing": "",
                        "Transport": "",
                        "Wholesale": $('input[name="wholesale"]').val(),
                        "Sales": "",
                        "Buy": "",
                        "Status": "",
                        "Updated": "2021-02-08T13:03:51.454527615Z",
                        "Desc": ""
                    },
                    success: (res) => {
                        $('input[name="id3"]').val('')
                        $('input[name="wholesale"]').val('')
                        $.ajax({
                            url: "http://localhost:8080/getProductAll",
                            type: "GET",
                            dataType: 'json',
                            data:{},
                            success: (res) => {
                                console.log(res)
                                this.productList = res
                            },
                            error:()=>{
                                console.log("失败");
                            }
                        })
                    },
                    error:()=>{
                        console.log("失败");
                    }
                })
            },
            sales: function () {
                let _this = this
                $.ajax({
                    url: "http://localhost:8080/salesProduct",
                    type: "POST",
                    dataType: 'json',
                    data:{
                        "Id": $('input[name="id4"]').val(),
                        "Name": "",
                        "Produce": "",
                        "Processing": "",
                        "Transport": "",
                        "Wholesale": "",
                        "Sales": $('input[name="sales"]').val(),
                        "Buy": "",
                        "Status": "",
                        "Updated": "2021-02-08T13:03:51.454527615Z",
                        "Desc": ""
                    },
                    success: (res) => {
                        $('input[name="id4"]').val('')
                        $('input[name="sales"]').val('')
                        $.ajax({
                            url: "http://localhost:8080/getProductAll",
                            type: "GET",
                            dataType: 'json',
                            data:{},
                            success: (res) => {
                                console.log(res)
                                this.productList = res
                            },
                            error:()=>{
                                console.log("失败");
                            }
                        })
                    },
                    error:()=>{
                        console.log("失败");
                    }
                })
            },
            buy: function () {
                let _this = this
                $.ajax({
                    url: "http://localhost:8080/buyProduct",
                    type: "POST",
                    dataType: 'json',
                    data:{
                        "Id": $('input[name="id5"]').val(),
                        "Name": "",
                        "Produce": "",
                        "Processing": "",
                        "Transport": "",
                        "Wholesale": "",
                        "Sales": "",
                        "Buy": $('input[name="buy"]').val(),
                        "Status": "",
                        "Updated": "2021-02-08T13:03:51.454527615Z",
                        "Desc": ""
                    },
                    success: (res) => {
                        $('input[name="id5"]').val('')
                        $('input[name="buy"]').val('')
                        $.ajax({
                            url: "http://localhost:8080/getProductAll",
                            type: "GET",
                            dataType: 'json',
                            data:{},
                            success: (res) => {
                                console.log(res)
                                this.productList = res
                            },
                            error:()=>{
                                console.log("失败");
                            }
                        })
                    },
                    error:()=>{
                        console.log("失败");
                    }
                })
            },
        }
    })
</script>
</html>